<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC的原理和实战</title>
    <style>
        /* 
        原因: 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
        解决办法: BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

        html（BFC） - box1,box2 兄弟并列
        外间距: 50px => 90px;  组件复用

         */
        .box1 {
            width: 200px;
            height: 200px;
            background-color: gold;
            margin-bottom: 40px;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 50px;
        }
        /* parent  =>  BFC 特点的元素  =>  触发条件
        float:left/right                      => 副作用 会导致父元素的高度塌陷
        position:absolute/fixed;              => 副作用 脱离文档流- 影响其他的元素（后面）
        display:inline-block/table-cell(td)   => 副作用 不独占一行
        overflow：auto / hidden / scroll      => scroll + auto 滚动条
         */
        .parent{
            overflow: hidden;
        }
    </style>

</head>

<body>
    <div class="box1">珠峰培训</div>
    <div class="parent">
        <div class="box2">珠峰培训</div>
    </div>
</body>

</html>